<template>
  <view class="view_contain">
    <header-bar :title="titleName"> </header-bar>
    <view-tabbar tabIndex="4"></view-tabbar>
    <!-- 第一部分 -->
    <view class="view_1">
      <view class="view_image_text">
        <image
          class="image_radius"
          src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
        />
        <text class="pet">猫猫没有猫耳朵</text>
        <text class="hi">Hi~欢迎来到E.创宝</text>
        <text class="yuan">愿每一个愿望得以达成</text>
        <view class="btn">注册成为会员</view>
      </view>
    </view>
    <!-- 第二部分 -->
    <view class="view_2">
      <view class="view_tupianwenzi" @click="goto">
        <image
          class="image_tupian"
          src="https://s2.loli.net/2022/05/24/vNFQzfjwx19mRsV.png"
        ></image>
        <text class="text_saoyisao">待付款</text>
      </view>
      <view class="view_tupianwenzi" @click="goto">
        <image
          class="image_tupian"
          src="https://s2.loli.net/2022/05/24/Qx2R9w7CEBbUh5A.png"
        ></image>
        <text class="text_saoyisao">已付款</text>
      </view>
      <view class="view_tupianwenzi" @click="goto">
        <image
          class="image_tupian"
          src="https://s2.loli.net/2022/06/01/fPC4AkmSp3b2zqK.png"
        ></image>
        <text class="text_saoyisao">退款中</text>
      </view>
      <view class="view_tupianwenzi" @click="goto">
        <image
          class="image_tupian"
          src="https://s2.loli.net/2022/05/25/pDAIbdVZSx93W6f.png"
        ></image>
        <text class="text_saoyisao">服务中</text>
      </view>
    </view>
    <!-- 第三部分 -->
    <view class="view_3">
      <view class="list-item1" @click="goto_2">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/06/04/u1FrYP2ZepKfE7s.png"
        ></image>
        <text class="item-text">我的信息</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
      <view class="list-item1" @click="goto_4">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/06/01/XhfDusG62VlvwBp.png"
        ></image>
        <text class="item-text">我的公益拍卖</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
      <view class="list-item1" @click="goto_6">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/06/01/l2guziNEwIoxPJe.png"
        ></image>
        <text class="item-text">我的地址</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
      <view class="list-item1" @click="goto_3">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/05/27/ci4GK2QmoFgXDlk.png"
        ></image>
        <text class="item-text">官方客服</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
      <view class="list-item1" @click="go">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/05/27/zi6JR1lHcZ8BgSv.png"
        ></image>
        <text class="item-text">我的积分</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
      <view class="list-item1" @click="goto_5">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/06/01/fGWoEOP13J6baHk.png"
        ></image>
        <text class="item-text">我的易货</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
      <view class="list-item1" @click="goto_1">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/05/27/bBos9PAu5T72vlG.png"
        ></image>
        <text class="item-text">我的收藏</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
      <view class="list-item1" @click="is_show_share_box = true">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/05/27/26ZAB95Jp1ewigk.png"
        ></image>
        <text class="item-text">分享邀请</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
      <view class="list-item1">
        <image
          class="item-image"
          src="https://s2.loli.net/2022/05/27/Vw7CefAjvdcmMLP.png"
        ></image>
        <text class="item-text">版本更新</text>
        <image
          class="image-jiantou"
          src="https://s2.loli.net/2022/05/27/eB6z3VgMTDdIvJC.png"
        ></image>
      </view>
    </view>
    <shareColumn
      @share="share"
      :is_show_share_box="is_show_share_box"
      @hideColumn="is_show_share_box = !is_show_share_box"
    ></shareColumn>
  </view>
</template>

<script>
import badgeMix from "@/mixins/tabbar-badge.js";
import { mapState } from "vuex";
import shareColumn from "@/components/share-column/share-column.vue";
import { get_provider } from "@/components/utils/common.js";

export default {
  components: {
    shareColumn,
  },
  mixins: [badgeMix],
  data() {
    return {
      is_show_share_box: null,
      provider_list: [],
      titleName: "我的",
    };
  },
  computed: {
    ...mapState("m_user", ["token"]),
  },
  onLoad() {
    get_provider().then((res) => {
      this.provider_list = res;
    });
  },
  methods: {
    share(type) {
      console.log(type);
      //执行分享的逻辑
    },
    go: function () {
      uni.navigateTo({
        url: "/subpkg/integral/integral",
      });
    },
    goto: function () {
      uni.switchTab({
        url: "/pages/order/order",
      });
    },
    goto_1: function () {
      uni.navigateTo({
        url: "/subpkg/collection/collection",
      });
    },
    goto_2: function () {
      uni.navigateTo({
        url: "/subpkg/userinfo/userinfo",
      });
    },
    goto_3: function () {
      uni.navigateTo({
        url: "/subpkg/chat/chat",
      });
    },
    goto_4: function () {
      uni.navigateTo({
        url: "/subpkg/public/public",
      });
    },
    goto_5: function () {
      uni.navigateTo({
        url: "/subpkg/barter/barter",
      });
    },
    goto_6: function () {
      uni.navigateTo({
        url: "/subpkg/address/address",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  width: 100%;
  height: 97%;
  font-family: PingFang SC;
}

.view_contain {
  width: 100%;
  height: 97%;
  background: #f0eeed;
}

/* 第一部分 */
.view_1 {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 18%;
  background: #fff;

  .view_image_text {
    width: 100%;
    position: absolute;
    left: 40px;
    top: 20px;
    display: flex;
    float: left;
    justify-self: center;
    flex-direction: column;
  }

  .image_radius {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin-bottom: 15px;
  }

  .pet {
    margin-left: -15px;
  }

  .hi,
  .yuan {
    position: absolute;
    display: block;
    top: 1.5%;
    font-family: "华文行楷";
    margin-left: 34.5%;
  }

  .hi {
    font-size: 20px;
    font-weight: bold;
  }

  .yuan {
    margin-top: 28px;
  }

  .btn {
    width: 145px;
    height: 43px;
    line-height: 43px;
    text-align: center;
    font-size: 18px;
    color: white;
    background: linear-gradient(to right, #aa55ff, #46aaf8);
    border: none;
    border-radius: 10px;
    border-bottom-right-radius: 60px;
    border-top-left-radius: 60px;
    position: absolute;
    left: 36%;
    top: 60%;
    box-shadow: 0px 0px 10px gold;
    animation: btn_anim 1s infinite;
    cursor: pointer;
  }

  @keyframes btn_anim {
    10% {
      background: linear-gradient(to right, #aa55ff 10%, #46aaf8);
    }

    30% {
      box-shadow: 0px 0px 10px red;
      background: linear-gradient(to right, #aa55ff 30%, #46aaf8);
    }

    50% {
      background: linear-gradient(to right, #aa55ff 50%, #46aaf8);
    }

    70% {
      box-shadow: 0px 0px 10px blueviolet;
      background: linear-gradient(to right, #aa55ff 70%, #46aaf8);
    }

    90% {
      background: linear-gradient(to right, #aa55ff 90%, #46aaf8);
    }
  }
}

/* 第二部分 */

.view_2 {
  margin-top: 20rpx;
  width: 100%;
  height: 12%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: white;
}

.view_tupianwenzi {
  display: flex;
  flex-direction: column;
  width: 120rpx;
  align-items: center;
  margin-left: 25rpx;
  margin-right: 25rpx;
}

.image_tupian {
  display: flex;
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 20rpx;
}

/* 第三部分 */

.view_3 {
  width: 100%;
  height: 67%;
  /* background: #f0eeed; */
}

.list-item1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 80rpx;
  margin-top: 20rpx;
  position: relative;
  /*父元素位置要设置为相对*/
  background: white;
}

.item-image {
  width: 53rpx;
  height: 53rpx;
  margin: 30rpx;
}

.item-text {
  color: gray;
  font-size: 35rpx;
  margin-left: 5rpx;
}

.image-jiantou {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  /* 要约束所在位置的子元素的位置要设置成绝对 */
  right: 0;
  /* 靠右调节 */
  margin-right: 40rpx;
}
</style>
